<template>
  <div>
    <div id="corporate-culture">
      <p>1</p>
      <section class="sec-01">
        <div class="back-holder">
          <div class="back-box" @click="goBack">
            <img src="../../assets/img/wx/mode/back.png"/>
          </div>
        </div>
        <div class="sec-01__title-box">
          <head-line :txt="sec01Text" :txtStyle="sec01TextStyle"></head-line>
        </div>
        <div class="sec-01__content_box">
          <div class="sec-01__content_box_img">
            <img src="../../assets/img/wx/about-us/corporate-culture-img1.png" alt="">
          </div>
          <div class="sec-01__content_box_title">
            <div class="sec-01__content_box_title_header" flex="main:left">
              <p class="p1">核心价值观</p>
              <div class="slash"></div>
              <p class="p2">诚信务实，创新创业，合作共赢</p>
            </div>
            <div class="sec-01__content_box_title2">
              <p>以诚信为本，求真务实，开拓创新，与合作伙伴共</p>
              <p>同成长，打造一流的服务，共创一流的企业，并在</p>
              <p>此基础上，追求与合作伙伴最大利益的共赢，实现</p>
              <p>共同发展。</p>
            </div>
          </div>
        </div>
        <div class="sec-01__content_box">
          <div class="sec-01__content_box_img">
            <img src="../../assets/img/wx/about-us/corporate-culture-img3.png" alt="">
          </div>
          <div class="sec-01__content_box_title">
            <div class="sec-01__content_box_title_header">
              <p class="p1">经营理念</p>
              <div class="slash"></div>
              <p class="p2">强化竞争意识，营造团队精神</p>
            </div>
            <div class="sec-01__content_box_title2">
              <p>为员工提供良好的工作环境和奖励机制，充分尊重</p>
              <p>和信任员工，使员工和企业共同进步。为合作商提</p>
              <p>供优质产品，市场营销方案和售后服务，形成区域</p>
              <p>性知名新能源品牌。</p>
            </div>
          </div>
        </div>
        <div class="sec-01__content_box">
          <div class="sec-01__content_box_img">
            <img src="../../assets/img/wx/about-us/corporate-culture-img2.png" alt="">
          </div>
          <div class="sec-01__content_box_title">
            <div class="sec-01__content_box_title_header">
              <p class="p1">愿景</p>
              <div class="slash2"></div>
              <p class="p3">打造“人-车-货”新能源汽车服务平台</p>
            </div>
            <div class="sec-01__content_box_title2">
              <p>推动绿色、低碳、智能城市物流行业发展，引导和</p>
              <p>倾听合作伙伴的需求，与合作伙伴共同成长，赢得</p>
              <p>行业尊敬，打造低碳服务生态圈，成为用户首选新</p>
              <p>能源货运平台。</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import headLine from "../mode/components/headline"

  export default {
    data() {
      return {
        sec01Text: "企业文化",
        sec01TextStyle: {
          "font-size": "20px",
          "color": "#ffffff"
        }
      }
    },
    mounted: function () {

    },
    components: {
      headLine,
    },
    methods: {
      goBack() {
        this.$router.back()
      }
    }
  }
</script>
<style scoped lang="scss">

  #corporate-culture {
    width: 100vw;
    background: #000000;
    .sec-01 {
      color: #ffffff;
      position: relative;
      overflow: hidden;
      .back-holder {
      padding: 23px 14px;
      .back-box {
        width: 103px;
        height: 103px;
        padding: 23px 23px;
        img {
          width: 59px;
          height: 59px;
        }
      }

    }
      .sec-01__title-box {
        margin:10% 0;
      }
      .sec-01__content_box {
        width: 100vw;
        margin-top: 10%;
        position: relative;
        .sec-01__content_box_img {
          width: 680px;
          margin-left: 35px;
          img {
            width: 100%;
          }
        }
        .sec-01__content_box_title {
          width: 680px;
          margin-top: 23px;
          margin-left: 35px;
          .sec-01__content_box_title_header {
            height: 140px;
            position: relative;
            overflow: hidden;
            .p1 {
              color: rgb(10, 131, 101);
              font-size: 38px;
            }
            .p2 {
              position: absolute;
              bottom: 20%;
              left: 30%;
              font-size: 25px;
            }
            .p3 {
              position: absolute;
              bottom: 20%;
              left: 15%;
              font-size: 25px;
            }
            .slash {
              position: absolute;
              top: -11%;
              left: 22%;
              width: 94px;
              height: 120px;
              box-sizing: border-box;
              text-indent: 5px;
            }

            .slash::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 70px;
              box-sizing: border-box;
              border-bottom: 1px solid #0B9773;
              transform-origin: bottom center;
              transform: rotateZ(-60deg) scale(1.9);
            }
            .slash2 {
              position: absolute;
              top: -11%;
              left: 6%;
              width: 94px;
              height: 120px;
              box-sizing: border-box;
              text-indent: 12px;
            }

            .slash2::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 70px;
              box-sizing: border-box;
              border-bottom: 1px solid #0B9773;
              transform-origin: bottom center;
              transform: rotateZ(-60deg) scale(1.9);
            }

          }
          .sec-01__content_box_title2 {
            margin: 6% 0;
            p {
              font-size: 28px;
              padding: 1% 0;
            }
          }
        }
      }
    }
  }
</style>
